<template>
  <div>
    <h2>山河不足重</h2>
    <h2>重在遇知己</h2>
    <router-link to="/Home/news">新闻</router-link>
    <router-link to="/Home/message">消息</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home",
  data(){
    return{
      path:'/Home/news'
    }
  },
  /*
  *   当点击首页时，home组件被创建，当点击关于页面时，home组件被销毁，关于组件被创建。再点首页，home组件又被创建
  *    每次重新点首页，创建的都是新的组件
  * */
  //生命周期函数，当组件(vue实例)被创建完毕时，会回调created生命周期函数
  created() {
    console.log('home created');
    document.title='首页';
  },
  //当template被挂载到dom上，会回调mounted生命周期函数
  mounted(){

  },
//  只要界面发生一次刷新，会回调执行update生命周期函数
  updated() {

  },
  // 组件被销毁之后，会回调destroyed生命周期函数
  destroyed() {
    console.log('home destroyed');
  },
  // 当组件处于活跃时触发,
  // activated和deactivated函数，只有在该组件被保持了状态使用了keep-alive时，才是有效的
  activated() {
    console.log('activated');
    this.$router.push(this.path)
  },
  //当组件处于不活跃时触发
  deactivated() {
    console.log('deactivated');
  },
//  组件独享导航守卫
  beforeRouteLeave(to,from,next){
    console.log(this.$route.path);
    this.path=this.$route.path;
    next()
  }
}
</script>

<style scoped>

</style>